<template>
  <div class="box">
    <HeaderNav />
    <div class="main">
      <div class="content">
        <div class="content-item">
          <img src="@/assets/jpg/1.jpg" alt="photo" />
          <span @click="enterHome">Photos
            <icon-arrow-circle-right theme="outline" size="0.18rem" fill="#333" />
          </span>
        </div>
        <div class="content-item">
          <img src="@/assets/jpg/2.jpg" alt="photo" />
          <span @click="enterOther">Music
            <icon-arrow-circle-right theme="outline" size="0.18rem" fill="#333" />
          </span>
        </div>
        <div class="content-item">
          <img src="@/assets/jpg/3.jpg" alt="photo" />
          <span @click="enterOther">Novel
            <icon-arrow-circle-right theme="outline" size="0.18rem" fill="#333" />
          </span>
        </div>
        <div class="content-item">
          <img src="@/assets/jpg/4.jpg" alt="photo" />
          <span @click="enterOther">Video
            <icon-arrow-circle-right theme="outline" size="0.18rem" fill="#333" />
          </span>
        </div>
      </div>
      <router-view v-slot="{ route, Component }">
        <transition name="router_animate" :enter-active-class="`animate__animated ${route.meta.transition}`">
          <component :is="Component" />
        </transition>
      </router-view>
    </div>
  </div>
</template>

<script setup lang="ts">
import HeaderNav from "@/components/common/HeaderNav.vue";
import { getCurrentInstance } from 'vue'
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";

/**
 * 组件初始化
 */
// 引入路由
const router = useRouter()
// 引入实例
const instance = getCurrentInstance()

const enterHome = () => {
  if (!localStorage.getItem("token")) {
    // 如果没有登录
    instance?.proxy?.$Bus.emit("showLoginDialog")
  }
  router.push('/home')
}

const enterOther = () => {
  ElMessage.warning("敬请期待！")
}

</script>

<style lang="scss" scoped>
$item-height: 0.36rem;
$item-width: 0.6rem;
$a-font-size: 0.08rem;

span {
  cursor: pointer;
}

.box {
  height: auto;
  width: 100%;
  margin: 0 0;

  .main {
    // height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    // background-color: #d7d8ce;

    .content {
      position: fixed;
      top: $item-height;
      left: $item-height * 3;
      width: $item-width * 13;
      height: $item-height * 13;
      // background-color: rgb(53, 80, 53);
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;

      .content-item {
        width: $item-width * 6;
        height: $item-height * 6;
        // background-color: rgb(209, 211, 197);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-shadow: $item-width * 0.1 $item-width * 0.1 $item-width * 0.1 #888888;

        img {
          height: $item-height * 4;
          width: $item-width * 4;
        }

        span {
          height: $item-height * 0.5;
          font-size: $a-font-size;
          display: flex;
          align-items: center;
        }
      }
    }
  }
}

.router_animate-enter-active {
  animation: backInDown 1s;
}

.router_animate-leave-active {
  animation: backOutDown 0.6s;
}

@media screen and (max-width:1024px) {
  .box {
    .main {
      .content {
        position: fixed;
        top: $item-height*3;
      }
    }
  }

}

@media screen and (max-width:600px) {
  .box {
    .main {
      .content {
        position: fixed;
        top: $item-height*5;

        .content-item {
          width: $item-width * 12;
          height: $item-height * 9;

          img {
            height: $item-height * 8;
            width: $item-width * 8;
          }
        }
      }
    }
  }

}
</style>
